<!--
 * @description:
 * @author: huangpeng
 * @date: 2023年07月09日 21:23
 * @Copyright:  2022-2023
!-->
<template>
  <div class="main-carousel">
    <div class="left-carousel">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="article in firstRecList" :key="article.id">
          <router-link :to="{ name: 'ArticleInfo', params: { id: article.id } }">
            <el-image style="width: 100%; height: 100%" :src="article['blogImage']" fit="cover" class="carousel-img"/>
            <div class="carousel-title">
              {{article['blogTitle']}}
            </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="right-carousel">
      <el-carousel :interval="5000" arrow="always" class="second-right-carousel">
        <el-carousel-item v-for="article in secondRecList" :key="article.id">
          <router-link :to="{ name: 'ArticleInfo', params: { id: article.id } }">
            <el-image style="width: 100%; height: 100%" :src="article['blogImage']" fit="cover" class="carousel-img"/>
            <div class="carousel-title">
              {{article['blogTitle']}}
            </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
      <el-carousel :interval="5000" arrow="always" class="third-right-carousel">
        <el-carousel-item v-for="article in thirdRecList" :key="article.id">
          <router-link :to="{ name: 'ArticleInfo', params: { id: article.id } }">
            <el-image style="width: 100%; height: 100%" :src="article['blogImage']" fit="cover" class="carousel-img"/>
            <div class="carousel-title">
              {{article['blogTitle']}}
            </div>
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script lang="ts">
import { queryRecommendList } from "@/api/blog/article";
import { Vue, Component } from "vue-property-decorator";

@Component({})
export default class index extends Vue {

  /** 一级推荐列表 */
  private firstRecList: any = [];

  /** 二级推荐列表 */
  private secondRecList: any = [];

  /** 三级推荐列表 */
  private thirdRecList: any = [];

  private async created() {
    await this.queryRecList();
  }

  /** 获取推荐列表 */
  private async queryRecList() {
    await queryRecommendList().then(res => {
      if (res.data && res.data.length >0) {
        this.firstRecList = res.data.filter((item: any)  => item.blogRecommend === '1');
        this.secondRecList = res.data.filter((item: any)  => item.blogRecommend === '2');
        this.thirdRecList = res.data.filter((item: any)  => item.blogRecommend === '3');
      }
    })
  }

}
</script>
<style scoped lang="scss">
.main-carousel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  ::v-deep .left-carousel {
    width: calc(71% - 10px);
    height: 450px;
    .el-carousel__container {
      height: 450px;
    }
    .el-carousel--horizontal {
      height: 450px;
    }
  }
  ::v-deep .right-carousel {
    height: 450px;
    width: calc(29% - 10px);
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .second-right-carousel {
      height: 260px;
      .el-carousel__container {
        height: 260px !important;
      }
      .carousel-title {
        bottom: 30px !important;
      }
    }
    .third-right-carousel {
      height: 170px;
      .el-carousel__container {
        height: 170px !important;
      }
      .carousel-title {
        bottom: 20px !important;
      }
    }
  }
  .carousel-title {
    position: absolute;
    bottom: 60px;
    padding: 0 8px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(0,0,0,.2);
    font-size: 20px;
    color: white;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

@media only screen and (max-width: 850px) {
  ::v-deep .left-carousel {
    width: 100% !important;
    height: 320px !important;
    .el-carousel__container {
      height: 320px !important;
    }
    .el-carousel--horizontal {
      height: 320px !important;
    }
  }
  .right-carousel {
    display: none !important;
  }
}
</style>
